var ORDER = ORDER || {};

ORDER.initPage = function(){
	$("#reservationList_forOrder").dialog({
			autoOpen: false,
			modal: true,
			width: 800,
			height: 400
	});
		this.max = 17;
		this.current = 17; //5 menupages
		$('span[data-dir="left"]').hide();
		$('span[data-dir="right"]').show();
		
		this.list = new Array;
		this.reservationId = -1;
		this.optlist = new Array;
		
		var that = this;
		
		$('.nav').click(function(){
			var dir = $(this).attr('data-dir');
			if(dir == "right"){
				$this = $('.menupage:eq('+ that.current + ')');
			}else{
				$this = $('.menupage:eq('+ (that.current+1) + ')');
			}

			if ($this.css('left') == '0px') {
				$this.animate({ width: '0px', left: '420px', 'padding-left':'0px','padding-right':'0px'}, 150, function(){
                    $this.next().animate({
                        width: '400px',
                        'padding-left':'10px', 
						'padding-right':'10px'
                    }, 150);
                    
                    $this.nextAll().eq(1).animate({
                        left: '0px',
                        width: '400px',
                        'padding-left':'10px', 
						'padding-right':'10px'
                    }, 50);  
                });
                
                that.current += 2;
               	$('span[data-dir="right"]').show();
               	if(that.current >= that.max)
               		$('span[data-dir="left"]').hide();
               	else
               		$('span[data-dir="left"]').show();
				
			}else{
				if ($this.index() == 0) {
				}else{
					$this.prev().width('1px');
					$this.animate({ width: '0px','padding-left':'0px','padding-right':'0px'}, 150, function(){
						$this.prev().animate({
							left: '0px',
							width: '400px',
							'padding-left':'10px', 
							'padding-right':'10px'
						}, 150);
						$this.next().animate({ width: '0px', 'padding-left':'0px', 'padding-right':'0px'}, 150);
						
						that.current -= 2;
						$('span[data-dir="left"]').show();
						if(that.current <= 0)
							$('span[data-dir="right"]').hide();
						else
							$('span[data-dir="right"]').show();
					});
				}
			}
		});
	
		
		$('.orderbtn').click(function(){
			var orderId = $(this).parents('.up').find('.menuicon').attr('data-id');
			var orderImg = 'images/' + orderId + '.jpg';
			var orderopt = $(this).parents('.up').find('.orderopt').children('input:checked').val();
			orderopt = orderopt || '';
			
			var li    = $('<li data-name="'+orderId+'"></li>');
			var a     = '<a href="#"></a>';
			var img   =  '<img src="' + orderImg + '"/>';
			li.append(a).append(img);
			
			var same = false;
			for(var i in that.list){
				if(that.list[i] == orderId){
					same = true;
					if(!confirm("Add same item?")){
							return false;
					}else{
						that.list.push(orderId);
						that.optlist.push(orderopt);
						$('#orderlist').prepend(li);
						li.data('group',1);
						break;
					}
				}
			}
			if(!same){
				that.list.push(orderId);
				that.optlist.push(orderopt);
				$('#orderlist').prepend(li);
				li.data('group',1);
			}
			
			if(that.list.length > 0){
				$('#orderDisplay p').fadeIn('slow');
			}else{
				$('#orderDisplay p').fadeOut('slow');
			}	
		});
		
		$('#orderlist').sortable({
			placeholder: "my-highlight",
			tolerance: 'pointer',
			revert: false,
			stop: function(event, ui){
				var identity = ui.item.data('group');
				var data_name = ui.item.attr('data-name');
				if(identity){
					var x = ui.position.left;
					var y = ui.position.top;
					if(x>200 || x<-170 || y<-120 || y>500){
						ui.item.remove();
						var idx = that.list.indexOf(data_name);
						that.list.splice(idx,1);
						that.optlist.splice(idx,1);
					}else{
						return;
					}
				}else{
					for(var i in that.list){
						if(that.list[i] == data_name){
							if(!confirm("Add same item?")){
								ui.item.remove();
								return;
							}else{
								break;
							}
						}
					}
					that.list.push(data_name);
					that.optlist.push('');
					ui.item.data('group',1);
				}
				if(that.list.length > 0){
					$('#orderDisplay p').fadeIn('slow');
				}else{
					$('#orderDisplay p').fadeOut('slow');
				}
			}
		});
		$('#orderlist').disableSelection();
		
		$('#orderDisplay p').click(function(){
			if($(this).css('display') != 'none'){
				$('#orderlist li').remove();
				$('#orderDisplay p').hide();
				var dataString = 'rid='+that.reservationId+'&orderlist='+that.list+"&orderopt="+that.optlist;
				alert(dataString);

				$.ajax({
					type:'POST',
					url:'updateOrderList.jsp',
					data:dataString,
					success:function(data){
						alert("Your order has successfully done!")
							HOME.showPage();
						
					}
				});

			}
		});
		
		$('#checkreservation_list').find('tr:gt(0)').hover(function(){
			$(this).css('background-color','#F2F2F2');
		},function(){
			$(this).css('background-color','white');
		});
		
		$('#checkreservation_list').find('a').click(function(){
			var rid = $(this).text();

			$.ajax({
				type:'POST',
				data:'rid='+rid,
				url:'getorderlist.jsp',
				success:function(data){
					that.reservationId = rid;
					that.list = new Array;
					that.optlist = new Array;
					
					var dir = "images/";
					var orders = data.replace(/[\s\r\n]+$/, '').trim().split(',');
					var orderImg, orderId;
					for(var i=0,j=orders.length; i<j ;++i){
						orderId = orders[i];
						if(orderId != undefined && orderId != ''){
							orderImg = orderId+".jpg";
							that.list.push(orderId);
							that.optlist.push('');
							var li    = $('<li data-name="'+orderId+'"></li>');
							var a    = '<a href="#"></a>';
							var img ='<img src="images/' + orderImg + '"/>';
							li.append(a).append(img);
							$('#orderlist').append(li);
							li.data('group',1);
						}
					}
					$("#reservationList_forOrder").dialog("close");
				}
			});
		});	
}

ORDER.showPage = function(){
		$("#menucontent").children().hide();
		$("#orderPage").show();
		$("#orderDisplay").show();
		$("#reservationList_forOrder").dialog("open");
}